<!--
 * @Description: 素材预览弹窗
 * @Author: Li Yujie
 * @Date: 2020/12/15
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2020/12/15
-->
<template>
    <div
        class="wrapper"
        ref="wrapper"
    >
        <el-dialog
            :visible.sync="dialogVisible"
            :show-close="false"
            width="375px"
            title="我的素材"
        >
            <div
                class="close-btn"
                @click="dialogVisible = false"
            >
                <i class="el-icon-circle-close"/>
            </div>
            <div class="content-wrapper">
                <!-- 头像昵称 -->
                <div class="header-view">
                    <div class="m-avatar">
                        <img src="@/assets/image/logo.png">
                    </div>
                    <div class="info">
                        <div class="name">掌大官方</div>
                        <div class="share">7679人已分享</div>
                    </div>
                </div>
                <!-- 宣传文案 -->
                <div
                    :class="`content ${collapse ? 'overflow' : ''}`"
                    ref="content"
                >
                    <span>{{ previewData.share_content }}</span>
                    <el-button
                        type="text"
                        @click="collapse = !collapse"
                        v-show="showCollapse"
                    >
                        {{ collapse ? '展开' : '收起' }}
                    </el-button>
                </div>
                <!-- 图片列表 -->
                <div
                    class="pic-list"
                    v-if="previewData.type === 1"
                >
                    <div
                        class="pic-item"
                        v-for="(item, index) in previewData.picList"
                        :key="index"
                        @click="fnShowPreview(previewData.picList, index)"
                    >
                        <img :src="item">
                    </div>
                </div>
                <!--视频-->
                <div
                    class="video-wrap"
                    @click="previewVideo"
                    v-if="previewData.type === 2"
                >
                    <div class="video">
                        <img :src="videoCover">
                    </div>
                    <div class="icon">
                        <img src="@/assets/image/play.png">
                    </div>
                </div>
                <!-- 按钮 -->
                <div class="btn-group">
                    <div class="save-btn">保存素材</div>
                    <div class="share-btn">分享素材</div>
                </div>
            </div>
        </el-dialog>

        <!-- 图片预览 -->
        <img-preview ref="preview"/>
        <!-- 视频播放组件 -->
        <video-simple
            ref="videoSimple"
            :url="video"
            :top="54"
            :left="left"
        />
    </div>
</template>

<script>
import imgPreview from '@/components/common/img-preview';
import videoSimple from '@/components/dorm/video-simple.vue';

export default {
    name: 'MaterialPreview',
    data() {
        return {
            dialogVisible: false,
            previewData: {},
            // true显示展开 false显示收起
            collapse: true,
            showCollapse: false,
            videoCover: '',
            video: null,
            // 视频位置
            left: 0
        };
    },
    components: {
        imgPreview,
        videoSimple
    },
    mounted() {
    },
    methods: {
        /**
         * 展示弹窗
         * @param data
         * @param video 视频
         * @param videoCover 视频封面
         */
        show(data, video, videoCover) {
            this.dialogVisible = true;
            this.previewData = data;

            this.$nextTick(() => {
                if (this.$refs.content.offsetHeight < this.$refs.content.scrollHeight) {
                    // 超出三行
                    this.collapse = true;
                    this.showCollapse = true;
                } else {
                    // 三行以内
                    this.showCollapse = false;
                }
                this.video = video;
                this.videoCover = videoCover;
            });
        },
        /**
         * 预览图片
         * @param   {String}    images      //单图预览
         * @param   {Array}     images      //多图预览
         * @param index
         */
        fnShowPreview(images, index) {
            if (images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$message({
                    type: 'warning',
                    message: '图片类型错误'
                });
            }
        },
        /**
         * 查看视频
         */
        previewVideo() {
            this.left = this.$refs.wrapper.clientWidth - 300;
            this.$refs.videoSimple.showVideo();
        },
    }
};
</script>

<style scoped lang="less">
.wrapper {
    /deep/ .el-dialog {
        width: 375px;
        height: 667px;
        background: #F5F6F8;
        box-shadow: 0 0 20px 0 rgba(153, 169, 192, 0.2);
        position: relative;

        &::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        .close-btn {
            position: absolute;
            right: -20px;
            top: -20px;
            cursor: pointer;
            font-size: 20px;
            color: #fff;
        }

        .el-dialog__header {
            padding: 0;
            height: 64px;
            background: #FFFFFF;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .el-dialog__body {
            width: 100%;
            padding: 0;

            .content-wrapper {
                margin: 10px;
                background: #FFFFFF;
                border-radius: 6px;
                box-sizing: border-box;
                padding: 12px;
                /*头像信息*/

                .header-view {
                    height: 42px;
                    display: flex;
                    align-items: center;

                    .m-avatar {
                        margin-right: 10px;
                    }

                    .info {
                        display: flex;
                        flex-direction: column;

                        .name {
                            font-size: 14px;
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 500;
                            color: #333333;
                        }

                        .share {
                            font-size: 12px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #999999;
                            margin-top: 6px;
                        }
                    }
                }

                /*宣传文案*/

                .content {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    line-height: 20px;
                    margin-top: 10px;
                    letter-spacing: 0;
                    text-align: justify;
                    overflow: hidden;
                    position: relative;

                    &.overflow {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 3;

                        .el-button--text {
                            padding: 0;
                            position: absolute;
                            right: 0;
                            bottom: 2px;
                            width: 50px;
                            text-align: right;
                            background-image: -webkit-linear-gradient(left, hsla(0, 0%, 100%, 0) 0, #fff 60%);
                            background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff 60%)
                        }
                    }

                    .el-button--text {
                        padding: 0;
                        text-decoration: underline;
                    }
                }

                /*图片列表*/

                .pic-list {
                    display: flex;
                    flex-wrap: wrap;
                    margin-top: 10px;

                    .pic-item {
                        width: 105px;
                        height: 105px;
                        border-radius: 4px;
                        overflow: hidden;
                        margin-right: 5px;
                        margin-bottom: 5px;
                        cursor: pointer;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }

                /*视频*/

                .video-wrap {
                    width: 105px;
                    height: 105px;
                    display: flex;
                    flex-wrap: wrap;
                    margin-top: 10px;
                    position: relative;
                    cursor: pointer;

                    .video {
                        height: 100%;
                        background: #FFFFFF;
                        border-radius: 4px;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .icon {
                        width: 40px;
                        height: 40px;
                        position: absolute;
                        z-index: 1;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                    }
                }

                .btn-group {
                    margin: 15px 0;
                    display: flex;
                    text-align: right;

                    .save-btn, .share-btn {
                        width: 70px;
                        height: 28px;
                        line-height: 28px;
                        text-align: center;
                        border-radius: 14px;
                        border: 1px solid #F95B56;
                        font-size: 12px;
                        font-weight: 500;
                        cursor: pointer;
                        margin-left: auto;
                    }

                    .save-btn {
                        color: #F95B56;
                    }

                    .share-btn {
                        margin-left: 10px;
                        color: #fff;
                        background: #F95B56;
                    }
                }
            }
        }
    }

}
</style>
